<template>
  <div class="mes_tree resume_tree">
    <el-container>
      <el-header height="unset">
        <el-form @submit.native.prevent>
          <el-input
            size="small"
            placeholder="请输入号码"
            v-model.trim="keyword"
            clearable>
            <el-select v-model="searchType" slot="prepend" placeholder="请选择">
              <el-option label="周转码" :value="1"></el-option>
              <el-option label="序列号" :value="2"></el-option>
            </el-select>
            <el-button
              size="mini"
              slot="append"
              icon="el-icon-search"
              native-type="submit"
              @click="handleSearch"
            ></el-button>
          </el-input>
          <el-autocomplete
            size="small"
            class="inline-input"
            v-if="searchType === 1 && serialNumbers.length > 1"
            :disabled="serialNumbers.length === 1"
            v-model="serialNumber"
            :fetch-suggestions="querySerialNumberSearch"
            placeholder="请输入序列号"
            @select="handleSerialNumberSelect">
          </el-autocomplete>
          <div
            v-if="matchedNodes.length > 1"
            class="tree_search_result">
            <span class="search_result_count">已查询出{{matchedNodes.length}}条结果</span>
            <div class="mes_btn">
              <el-button
                type="primary"
                class="search_next"
                size="mini"
                @click="handleNext">
                下一个
              </el-button>
            </div>
          </div>
        </el-form>
      </el-header>
      <el-main v-loading="isLoading">
        <el-scrollbar ref="scrollbar" style="height: 100%">
          <div class="search_empty" v-if="taskList.length === 0&&!isLoading">
            <img width="120" src="@/assets/img/pic_default_empt_search.png" alt="">
            <p class="no_data">暂无数据</p>
          </div>
          <el-tree
            ref="elTree"
            v-else
            node-key="label"
            :data="taskList"
            :default-expanded-keys="defaultExpandedKeys"
            :props="defaultProps"
            check-on-click-node
            :expand-on-click-node="false"
            highlight-current
            @node-click="handleNodeClick"
            @node-expand="handleNodeExpand">
            <div
              slot-scope="{ node, data }">
              <span class="el-tree-node__label" :class="{'tree_search_result_node': targetId === node.id}">
                <span v-if="node.level === 1">{{node.label}}</span>
                <span v-else-if="node.level === 2">{{node.label}}/{{data.product}}</span>
                <span v-else>{{node.label}}</span>
              </span>
            </div>
          </el-tree>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ResumeTreeService from './resumeTreeService'
import resumeTreeSearch from './resumeTreeSearch'
import TreeService from '../TreeService'
import treeUtil from '../treeUtil'

export default {
  name: 'ResumeTree',
  mixins: [TreeService, ResumeTreeService, resumeTreeSearch],
  data() {
    return {
      searchType: 1, // 周转码、序列号下拉框，1：周转码，2：序列号
      keyword: '', // 第一个输入框输入值，周转码或序列号
      serialNumber: undefined, // 下拉输入框的值：序列号
      serialNumbers: [], // 周转码对应的序列号列表
      currentTaskNumberIndex: 0, // 匹配的任务号索引
      matchedTaskNodes: [], // 匹配的任务号节点结果
      currentMatchedNodeIndex: 0, // 匹配的搜索结果索引
      matchedNodes: [], // 匹配的搜索结果
      targetId: null, // 搜索结果的node id
      treeClientHeight: 0,
      isLoading: false,
      taskList: [],
      defaultExpandedKeys: [],
      defaultProps: [{
        children: 'children',
        label: 'label',
      }],
    }
  },
  mounted() {
    this.initTaskNumberTree()
  },
  computed: {
    // 序列号搜索下拉框值列表
    serialNumberOptions() {
      return this.serialNumbers.reduce((pre, cur) => [...pre, {value: cur}], [])
    }
  },
  methods: {
    // 初始化任务号树，并将任务号展开
    async initTaskNumberTree() {
      let taskList = treeUtil.appendChildren(await this.getTaskNumberTree())
      this.taskList = taskList
      this.defaultExpandedKeys = taskList.reduce((pre, cur) => [...pre, cur.label], [])
    },
    // 当展开任务号时加载任务号下的工单数据
    async handleNodeExpand(data, node) {
      if (node.level === 2) {
        node.loading = true
        node.expanded = false
        let materialTree = await this.getMaterialTree(data.label)
        if (materialTree.length === 0) {
          data.children = undefined
          node.loading = false
          return
        }
        data.children = materialTree
        node.expanded = true
        node.loading = false
      }
    },
    // 点击树结点时抛出所选节点的任务号
    handleNodeClick(data, node) {
      if (node.isLeaf || node.level <= 2) {
        return this.$emit('selectNode', undefined)
      }
      this.$emit('selectNode', data.number)
    },
    // 搜索下一个
    handleNext() {
      this.currentMatchedNodeIndex++
      this.locatedNode()
    },
    querySerialNumberSearch(queryString, cb) {
      let results = queryString ? this.serialNumberOptions.filter(this.createFilter(queryString)) : this.serialNumberOptions
      cb(results)
    },
    createFilter(queryString) {
      return (serialNumberOption) => {
        return (serialNumberOption.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
  }
}
</script>

<style lang="less">
  .resume_tree_container {
    display: flex;
    overflow-x: hidden;
    height: calc(100% - 56px);
    .resume_tree {
      flex: 0 0 350px;
      border-right: 1px solid #dbe1e8;
      /*outline: 1px slategray solid;*/
      & + * {
        flex: 1;
        overflow-x: auto;
      }
      .el-select .el-input {
        width: 90px;
      }
      .el-input-group__prepend {
        background-color: unset;
      }
      .tree_search_result {
        margin-bottom: 10px;
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        align-items: center;
        .search_result_count {
          font-size: 14px;
          color: #999999;
        }
        .search_next {
          width: 60px;
          min-width: unset;
          line-height: unset;
          height: 22px;
          padding: 0;
        }
      }
      .el-autocomplete {
        width: 100%;
        margin-top: 10px;
      }
    }
  }
</style>
